<template>
    <div class="emailSend-container" style="padding:0 100px">
        <el-col :span="20">
        <el-form ref="form" :model="form" label-width="200px">
            <el-form-item :label="$t('alarmpush.alarmSend.emailSend')" class="marginbottom_10">
                <el-switch
                    v-model="form.ownSendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.ownSendFlag==1" prop="email" :rules="[{ required: form.ownSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.email" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('alarmpush.alarmSend.daySend')" class="marginbottom_10">
                <el-switch
                    v-model="form.daySendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.daySendFlag==1" prop="dayEmail" :rules="[{ required: form.daySendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.dayEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('alarmpush.alarmSend.weekSend')" class="marginbottom_10">
                <el-switch
                    v-model="form.weekSendFlag"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ccc">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="form.weekSendFlag==1" prop="weekEmail" :rules="[{ required: form.weekSendFlag==1, message: $t('index_js_notNull')},{validator:test_email,trigger:'blur'}]">
                <el-input type="textarea" v-model="form.weekEmail" :rows="3" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="save('form')" class="pull-right">{{$t('save')}}</el-button>
        </el-col>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        this.test_email=(rule, value, callback) => {
            let email_reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6})(;([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6}))*$/;
            if(value!=''&&!email_reg.test(value)){
                callback(new Error(this.$t('login.js_sign_email_error')));
            }else{
                callback()
            }
        }
        return {
            form:{
                ownSendFlag: '',
                email: '',
                daySendFlag: '',
                dayEmail: '',
                weekSendFlag: '',
                weekEmail: '',
            },
            test_email:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getAlarmSend()
    },
    methods: {
        async getAlarmSend(){
            let res = await this.API.getAlarmSend({})
            if(res){
                for(let key in this.form){
                    this.form[key]=res[key]
                }
            }
        },
        save(formName){
            this.$refs[formName].validate(async (valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            let res = await this.API.updateAlarmSend(this.form)
            if(res == '0'){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
        }
    },
};
</script>

<style lang="less">

</style>
